<template>
	<view class="pageBg">
		<view v-if="swiperList.length>0" class="margin_b64"><fr-zoom-swiper :swiperList="swiperList" :setting="setting"></fr-zoom-swiper></view>
		<view class="cnt">
			<block v-for="(item, index) in funcList" :key="item.id">
				<view v-if="item.status !== 0" class="listItem flex_r_sb_c" @click.stop="handleClick(item)">
					<view class="itemLeft flex_c_c_fs">
						<text class="f_32 fw_600 tc_1 margin_b4">{{item.title}}</text>
						<text class="f_24 fw_400 tc_8 text_line_1" style="width:500rpx;">{{item.desc}}</text>
					</view>
					<view class="itemRight flex_r_c_c">
						<view v-if="item.status === 2" class="itemRightTag f_20 fw_500 tc_w flex_r_c_c">测试中</view>
						<text class="iconfont iconrightArrow f_40"></text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
				    {id: '1', color: '#B9FE82'},
				    {id: '2', color: '#EF0000'},
				    {id: '3', color: '#AE67F4'},
				    {id: '4', color: '#E7A139'},
				    {id: '5', color: '#FFE600'},
				    {id: '6', color: '#95D8FE'},
				],
				setting: {
					indicatorDots: false,
					indicatorColor: '#DDD',
					indicatorActiveColor: '#555',
					circular: true,
					autoplay: true,
					interval: 3000,
					duration: 1000,
					imgKey: 'imgurl',
					idkey: 'date',
				},
				// status  0 => 停止使用, 1 => 正常使用, 2 => 测试中
				funcList: [
					{id: '01', title: '层叠轮播', desc: '仿小米有品卡片式层叠轮播图', status: 1, url: '/pages/works/cardSwiper/cardSwiper'},
					{id: '02', title: '件数步进器', desc: '非组件化步进器, 可自定义修改', status: 1, url: '/pages/works/piecesStepper/piecesStepper'},
					{id: '03', title: 'scroll-view', desc: 'scroll-view高度计算&下拉刷新&触底加载', status: 1, url: '/pages/works/scrollView/scrollView'},
					{id: '04', title: '常规搜索页', desc: '带本地记录的搜索功能', status: 1, url: '/pages/works/search/search'},
					{id: '05', title: '微信授权登录', desc: '常规微信授权登录&授权获取手机号流程逻辑展示', status: 1, url: '/pages/works/wechatLogin/wechatLogin'},
					{id: '06', title: '自定义顶部tab栏', desc: '自定义数据&选中颜色&点击返回选中数据等', status: 1, url: '/pages/works/customTab/customTab'},
					{id: '07', title: 'app&h5&mp通用瀑布流', desc: '自行设置列数, 间隔, 灵活配置图片下方内容', status: 1, url: '/pages/works/waterfallsFlow/waterfallsFlow'},
				],
				refresh: false,
			};
		},
		onLoad(e) {
			// process.env.NODE_ENV === 'development'? this.getSwiper() : null
			this.getSwiper()
		},
		methods: {
			getSwiper() {
				const _this = this
				
				if(_this.$tool.getDate('date') === uni.getStorageSync('moon|workSwiper').date) {
					_this.swiperList = uni.getStorageSync('moon|workSwiper').data
					return
				}
				
				const url = 'https://api.muxiaoguo.cn/api/bing'
				_this.$api.get({
					url: url,
					loadingTip: _this.refresh ? '获取数据中...' : '',
					data: {
						api_key: '1c1d1adb8eb4c306',
						id: 'today', // 分类ID(today.七天内图片, 数值: 1-7其他分类下的图片)
						pn: '8', // 加载的图片数量范围: 1-8
					},
					success: res => {
						_this.swiperList = res.data
						
						let data = {
							date: _this.$tool.getDate('date'),
							data: _this.swiperList
						}
						uni.setStorageSync('moon|workSwiper', data)
					},
					fail: err => {}
				})
			},
			handleClick(e) {
				if(process.env.NODE_ENV === 'development') {
					// 开发环境
					this.$tool.go(e.url)
				} else if(process.env.NODE_ENV === 'production') {
					// 生产环境
					e.status === 1? this.$tool.go(e.url) : this.$tool.msg('测试中...')
				}
			},
		}
	}
</script>

<style lang="scss">
page {
	background-color: #253b55;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.cnt {
		padding: 0 28rpx;
		box-sizing: border-box;
		margin-bottom: 108rpx;
		.listItem {
			width: 100%;
			height: 120rpx;
			background: rgba(255, 255, 255, 0.8);
			border-radius: 16rpx;
			margin-bottom: 16rpx;
			padding: 0 28rpx;
			box-sizing: border-box;
			.itemRight {
				.itemRightTag {
					height: 36rpx;
					padding: 0 12rpx;
					box-sizing: border-box;
					background: #ED4C4C;
					border-radius: 8rpx;
				}
			}
		}
	}
}
</style>
